<template>
    <div class="mail">
        <div class="_box">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="信件管理" name="first" id="index_1">
                    <div class="_card _l">
                        <div v-for="item in listdata" :key="item.index" class="_item">
                            <el-checkbox class="_chose" v-model="item.chose" size="medium"></el-checkbox>
                            <el-tag class="_status"><i :class="item.statusIcon"></i></el-tag>
                            <div class="_title">{{item.title}}</div>
                            <div class="_text">{{item.text}}</div>
                            <div class="_time">{{item.time}}</div>
                            <el-tag class="_tag" :type="item.tagType">{{item.tag}}</el-tag>
                        </div>
                    </div>
                    <div class="_card _r">
                        <div class="_title">
                            <div class="word">{{mail.title}}</div>
                            <div class="_time">{{mail.author}}于{{mail.time}}向你发送</div>
                            <div class="_tool"></div>
                        </div>
                        <div class="_text">
                            {{mail.text}}
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="发送邮件" name="second" id="index_2">发送邮件</el-tab-pane>
                <el-tab-pane label="通讯目录" name="third" id="index_3">通讯录</el-tab-pane>
                <el-tab-pane label="附录文件及其他" name="fourth" id="index_4">其他</el-tab-pane>
            </el-tabs>
        </div>
        
    </div>
</template>
<script>
    export default {
    data() {
      return {
        activeName: 'second',
        messageStatus:[
            {status:true,icon:'el-icon-folder-opened'},
            {status:false,icon:'el-icon-folder'}
        ],
        listdata:[
            {
                chose:false,
                title:'xxx',
                text:'xxx',
                time:'07/18',
                tag:'热点事件',
                tagType:'success',
                statusIcon:'',
                status:true
            },
            {
                chose:false,title:'xxx',text:'xxx',time:'',tag:'热点事件',tagType:'success',status:false
            },
            {
                chose:false,title:'xxx',text:'xxx',time:'',tag:'热点事件',tagType:'success',status:true
            },
        ],
        mail:{
            title:'xxx',
            time:'2020/7/18/20:20:30',
            text:'xxx',
            author:'xxx',
            annex:'xxx'
        }
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      updateicon(){
          this.$nextTick(function(){
            for(let index of this.listdata){
            // eslint-disable-next-line no-empty
                if(index.status === true){
                    index.statusIcon = this.messageStatus[0].icon
                // eslint-disable-next-line no-empty
                }else{
                    index.statusIcon = this.messageStatus[1].icon
                }
            }
          })
      }
    },
    mounted(){
        this.updateicon();
    }
  };
</script>
<style lang="scss" scoped>
    .mail{
        width: 100%;
        height: 100%;
        background: #f5f5f5;
        ._box{
            min-height: 80vh;
            width: 96%;
            position: relative;
            margin: 0 auto;
            #index_1{
                ._card{
                    height: 82vh;
                    background:#fff;
                    position: relative;
                    float: left;
                    overflow: hidden;
                }
                ._l{
                    width:34%;
                    ._item{
                        background: #fff;
                        width: 100%;
                        height: 100px;
                        position: relative;
                        float: left;
                        border-bottom: 1px solid #ccc;
                        ._title{
                            width: auto;
                            height: 40px;
                            overflow: hidden;
                            font-weight: 600;
                            line-height: 40px;
                            position: absolute;
                            top:10px;left: 30px;
                            right: 70px;
                            padding:0 10px;
                            font-size: 22px;
                        }
                        ._text{
                            width: auto;
                            height: 40px;
                            overflow: hidden;
                            line-height: 40px;
                            position: absolute;
                            bottom:10px;left: 30px;
                            right: 70px;
                            padding:0 10px;
                        }
                        ._time{
                            width: 70px;
                            height: 40px;
                            overflow: hidden;
                            line-height: 40px;
                            position: absolute;
                            top:10px;
                            right: 2%;
                        }
                        ._tag{
                            position: absolute;
                            bottom:10px;
                            right: 2%;
                        }
                        ._status{
                            position: absolute;
                            bottom:10px;
                            left: 2%;
                        }
                        ._chose{
                            position: absolute;
                            top:20px;
                            left: 5%;
                        }
                    }
                }
                ._r{
                    width:64%;
                    left: 2%;
                    ._title{
                        height: 100px;
                        width: 100%;
                        position: relative;
                        background: #fcfcfc;
                        border-bottom: solid 1px #ccc;
                        .word{
                            position: absolute;
                            left: 10px;
                            right: 80px;
                            padding:0 10px;
                            overflow: hidden;
                            width: auto;
                            height: 40px;
                            top: 10px;
                            line-height: 40px;
                            text-align: left;
                            font-size: 26px;
                            font-weight: 600;
                        }
                        ._time{
                            position: absolute;
                            left: 10px;
                            right: 80px;
                            padding:0 10px;
                            overflow: hidden;
                            width: auto;
                            height: 40px;
                            bottom: 10px;
                            line-height: 40px;
                            text-align: left;
                        }
                        .tool{

                        }
                    }
                }
            }
            
        }
    }

</style>
<style lang="scss">
    .mail{
        .el-tabs__item{
            font-size: 18px !important;
            height: 60px !important;
            line-height: 60px !important;
        }
    }
    
</style>